<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>用户注册</title>
  <c:set var="path" value="${pageContext.request.contextPath}"></c:set>
  <link rel="stylesheet" href="${path}/css/userRegisterStyle.css" type="text/css" media="all" />
</head>
<style>
  #bottom{
    height: 450px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .fullscreenvideo {
      position: absolute;
      top: 50%;
      left: 50%;
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: auto;
      z-index: -100;
      -webkit-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);
      -webkit-transition: 1s opacity;
      transition: 1s opacity;
  }

  .videocontainer{
      position: fixed;
      width: 100%;
      height: 100%;
      overflow: hidden;
      z-index: -100;
  }

  .videocontainer:before{
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      display: block;
      z-index: -1;
      top: 0;
      left: 0;
      background: rgba(25,29,34,.10);
  }
  .box{
      height:480px;
      width:450px;
      background: rgba(255,255,255,.3 );
      display: flex;
      flex-direction: column;
      justify-self:center;
      align-items: center;
      border-radius: 25px;
  }

  .form-inner-cont input,
  .form-inner-cont textarea {
      width: 100%;
      height: 70px;
      font-size: 16px;
      line-height: 25px;
      color: #333;
      padding: 20px 40px;
      font-family: inherit;
      text-align: left;
      background: rgba(43, 62, 126, 0.3);
      border-radius: 10px;
  }
    .form-input{
        width: 80%;
        height: 120px;
    }
    .bottom_register{
        width: 110px;
        height: 50px;
        background-image: linear-gradient(to right, #5cbf00, #00ff90);
        border-radius: 5px;
    }
</style>
<body>
<div class="videocontainer">
    <video class="fullscreenvideo" poster="__ROOT__/Themes/tdt/Asset/images/loginbg.jpg" id="bgvid" playsinline="" autoplay="" muted="" loop="">
        <source src="${path}/images/product/白色的沙滩与海洋.mp4" type="video/mp4">
    </video>
</div>
  <!-- simple-contact-form2 -->
  <section class="w3l-simple-contact-form2">

    <div class="section-gap">

        <form action="  ${pageContext.request.contextPath}/merchant/register" method="post" class="signin-form">
            <div class="form-inner-cont">
                <h3>商家注册</h3>
            <div class="box">

            <div style="width: 300px;margin: 0 auto;text-align: center;color: red">${msg}</div>
            <div class="box">
                <div class="form-input">
                  <label for="w3lName">用户名</label>
                  <input type="text" name="username" id="w3lName" placeholder="请输入用户名" required="" />
                </div>
                <div class="form-input">
                  <label for="w3lSender">用户密码</label>
                  <input type="text" name="password" id="w3lSender" placeholder="请输入密码" required />
                </div>
                <div class="form-input">
                    <label for="w3lSender">商家详细信息</label>
                    <input type="text" name="merchantParticulars"  placeholder="请输入详细信息" required />
                </div>
                <div style="text-align: center;padding-bottom: 20px">
                    <button class="bottom_register">点击注册</button>
                </div>
            </div>
        </div>
            </div>
        </form>

    </div>
  </section>
  <!-- /simple-contact-form2 -->
</body>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/layui/layui.all.js"></script>
<script>
  <%--layui.use('upload', function() {--%>
  <%--  var $ = layui.jquery--%>
  <%--          , upload = layui.upload;--%>
  <%--  //执行实例--%>
  <%--  var uploadInst = upload.render({--%>
  <%--    elem: '#test1' //绑定元素--%>
  <%--    ,url: '${pageContext.request.contextPath}/common/upload' //上传接口--%>
  <%--    ,field:'file'--%>
  <%--    ,before:function (obj){--%>
  <%--      obj.preview(function(index, file, result){--%>
  <%--        $("#demo1").attr("style","display:block")--%>
  <%--        $('#demo1').attr('src', result); //图片链接（base64）--%>
  <%--      });--%>
  <%--    }--%>
  <%--    ,done: function(res){--%>
  <%--      //找到图片地址--%>
  <%--      let url = res.data[0].url;--%>
  <%--      document.getElementById("headImg").value = url;--%>
  <%--    }--%>
  <%--    ,error: function(){--%>
  <%--      //请求异常回调--%>
  <%--    }--%>
  <%--  });--%>
  <%--})--%>
  function upload(e){
      let pic = e.files[0];
      let form = new FormData();
      form.append("file",pic);

      let xhr = new XMLHttpRequest();
      xhr.open("post","${pageContext.request.contextPath}/common/upload");
      xhr.send(form);
      xhr.onreadystatechange = function (){
          if(xhr.readyState==4&&xhr.status==200){
              //将服务上传成功的返回字符串转成JSON
              let result = JSON.parse(xhr.responseText);
              //获取服务器返回的图片地址
              let url = result.data[0].url
              //获取显示封面的img标签
              let img = document.getElementById("pic");
              //修改img的样式，让img显示
              img.style.display = "block";
              //修改img的地址，让封面图片显示
              img.src = url;
              //将服务器返回的图片地址写入的表单隐藏域中
              document.getElementById("headImg").value = url;
          }
      }


  function checkUsername(e) {
    let username = e.value;
    //发送ajax请求验证用户名是否存在
    let xhr = new XMLHttpRequest();
    //open
    xhr.open("post","${pageContext.request.contextPath}/user/checkUsername")
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xhr.send("username="+username)
    xhr.onreadystatechange = function (){
      if(xhr.readyState==4&&xhr.status==200){
        document.getElementById("msg").innerText = xhr.responseText;
      }
    }
  }
      var video= document.getElementById('v1');
      video.playbackRate = 0.5;}
</script>
</html>